import React, { Component, lazy, Suspense } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import NavLinkMenu from './NavLinkMenu'
import Loading from './Loading'
// import About from './About'
// import Home from './Home'

const Home = lazy(() => import('./Home'))
const About = lazy(() => import('./About'))

export default class Demo extends Component {

  render() {
    return (
      <div>
        <div className='app-grout'>
          <NavLinkMenu/>
          <div>
            {/* 注册路由 Switch匹配到路由就不再往下匹配了，如果不加Switch，会往下匹配，然后有几个显示几个*/}
            <Suspense fallback={<Loading/>}>
               <Route path='/about' component={About} />
               <Route path='/home' component={Home} />
               <Redirect to='/about'></Redirect>
            </Suspense>
          </div>
        </div>
      </div>
    )
  }
}
